<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <main>
        <h1>Styling <code>&lt;details&gt;</code>: Half opened disclosure widget</h1>

        <p class="warning">Your browser does not support <code>::details-content</code>, so this demo won’t work as
            intended. Please use a browser with support – such as Chrome 131 or newer – to check out this page.</p>

        <h2>Demo</h2>

        <div id="demo">
            <details>
                <summary>
                    <span class="is-open">Read Less</span>
                    <span class="is-closed">Read More</span>
                </summary>
                <div class="details-content-wrapper">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur,
                        soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis
                        quod dignissimos saepe quas mollitia.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur,
                        soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis
                        quod dignissimos saepe quas mollitia.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur,
                        soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis
                        quod dignissimos saepe quas mollitia.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur,
                        soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis
                        quod dignissimos saepe quas mollitia.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam. Veritatis consequatur,
                        soluta molestiae voluptates accusamus qui odio, error, repellat rem harum id similique omnis
                        quod dignissimos saepe quas mollitia.</p>
                </div>
            </details>
        </div>

        <p>Demo for <a href="https://developer.chrome.com/blog/styling-details"
                target="_top">https://developer.chrome.com/blog/styling-details</a>, built after <a
                href=" https://www.bol.com/be/nl/p/emerio-po-115984-pizzarette-6-personen/9200000094697866/"
                target="_top">https:/www.bol.com/</a></p>

        <h2>The Code</h2>

        <h3>UI</h3>

        <pre><code>/* Nothing special to report */</code></pre>

        <h3>Animation</h3>
        <pre><code>::details-content {
        content-visibility: visible; /* Make it always visible */
        
        transition: height 0.5s ease;
        height: 150px;
        overflow: clip;
      }
      
      [open]::details-content {
        height: calc-size(auto, size + 0.5rem); /* calc-size because we need to add a length */
      }</code></pre>
    </main>
</body>

</html>

<style>
    @supports selector(::details-content) {
        .warning {
            display: none;
        }
    }

    #demo {
        padding-bottom: 2rem;
    }

    details {
        .is-open {
            display: none;
        }

        .is-closed {
            display: block;
        }
    }

    details[open] {
        .is-open {
            display: block;
        }

        .is-closed {
            display: none;
        }
    }

    details {
        background: white;
        position: relative;
        border-bottom: 1px solid #ccc;
    }

    summary {
        &::marker {
            content: '';
        }

        position: absolute;
        width: min-content;
        white-space: nowrap;
        color: blue;
        border: 1px solid blue;
        background: white;
        cursor: pointer;
        border-radius: 2px;
        transition: background 0.25s,
        color 0.25s;
        z-index: 2;

        &:hover {
            outline: 1px solid;
        }

        &:active {
            color: white;
            background: blue;
        }

        padding: 0.5rem 1rem;
        bottom: 0;
        left: 50%;
        transform: translate3d(-50%, 50%, 0)
    }

    .details-content-wrapper {
        padding: 0.5rem;

        &::before {
            content: '';
            height: 3rem;
            width: 100%;
            background-image: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 1));
            position: absolute;
            left: 0;
            bottom: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        [open] &::before {
            opacity: 0;
        }
    }

    ::details-content {
        content-visibility: visible;
        /* Make it always visible */

        transition: height 0.5s ease;
        height: 150px;
        overflow: clip;
    }

    [open]::details-content {
        height: calc-size(auto, size + 0.5rem);
        /* calc-size because we need to add a length */
    }

    @layer reset {
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        html {
            font-size: 14px;
        }
    }

    @layer baselayout {
        html {
            color: #444;
            font-family: system-ui;
            line-height: 1.42;

            overscroll-behavior-x: none;
            overflow: auto;
        }

        main {
            max-width: 90ch;
            margin: 0 auto;
            padding-bottom: 10rem;
        }

        p {
            margin-bottom: 1em;
        }

        h1,
        h2 {
            margin: 4em 0 1em;
        }

        h3 {
            margin: 1em 0 0.5em;
        }

        #demo {
            padding: 1em;
            border: 1px solid #ccc;
            background: #f4f6f9;
        }
    }

    @layer code {
        pre {
            border: 1px solid #dedede;
            padding: 1em;
            background: #f7f7f7;
            font-family: "Courier 10 Pitch", Courier, monospace;
            overflow-x: auto;
            border-left: 0.4em solid cornflowerblue;
            tab-size: 4;
        }

        code:not(pre code) {
            background: #f7f7f7;
            border: 1px solid rgb(0 0 0 / 0.2);
            padding: 0.1rem 0.3rem;
            margin: 0.1rem 0;
            border-radius: 0.2rem;
            /*      display: inline-block; */
            -webkit-box-decoration-break: clone;
            white-space: pre-wrap;
        }
    }

    @layer warning {
        .warning {
            box-sizing: border-box;
            padding: 1em;
            margin: 1em 0;
            border: 1px solid #ccc;
            background: rgba(255 255 205 / 0.8);
        }

        .warning> :first-child {
            margin-top: 0;
        }

        .warning> :last-child {
            margin-bottom: 0;
        }

        .warning a {
            color: blue;
        }

        .warning--info {
            border: 1px solid #123456;
            background: rgb(205 230 255 / 0.8);
        }

        .warning--alarm {
            border: 1px solid red;
            background: #ff000010;
        }
    }

    /* Hide a bunch of stuff when embedded */
    :root[data-embed="yep"] {
        main {
            padding: 2em 1em;

            :not(p.warning, p.warning *, #demo, #demo *, #demo ~ p, #demo ~ p *) {
                display: none;
            }
        }

        #demo~p {
            margin-top: 1em;
            text-align: center;
        }
    }
</style>